<template>
	<view>
		<view class="base">
			<view class="box">
				<view class="box1">

				</view>
			</view>
			<view class="content">
				<view class="content1">

				</view>
				<view class="content-item">
					<view class="">
						订单号:
					</view>
					<view class="orders">{{data.ordernum}}

					</view>
				</view>
				<view class="content-item">
					<view class="">
						用户:
					</view>
					<view class="">{{data.updateBy}}

					</view>
				</view>
				<view class="content-item">
					<view class="">
						下单时间:
					</view>
					<view class="">{{data.orderTime | formatTime}}

					</view>
				</view>
				<view class="content-item">
					<view class="">
						支付时间:
					</view>
					<view class="">{{data.payTime | formatTime}}

					</view>
				</view>
				<view class="content-item">
					<view class="">
						支付方式:
					</view>
					<view class="">微信

					</view>
				</view>
				<view class="content-item">
					<view class="">
						商品总额:
					</view>
					<view class="">￥{{data.totalPrice}}

					</view>
				</view>
				<view class="content-num1">
					<view class="">
						实付:
					</view>
					<view class="content-num1-money">
						￥{{data.totalPrice}}
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {}
			};
		},
		onLoad(data) {
			this.data = JSON.parse(data.data)
		},
		filters: {
			formatTime: data => {
				let data1 = data.split('T')
				return data1[0] + ' ' + data1[1].split('.')[0]
			}
		}
	}
</script>

<style lang="scss">
	.orders {
		font-size: 24rpx;
	}

	.base {
		width: 100vw;
		height: 100vh;
		padding-top: 78rpx;
		background: linear-gradient(180deg, rgba(101, 168, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);

		.box {
			margin: 0 auto;
			width: 664rpx;
			height: 40rpx;
			border-radius: 20rpx;
			background-color: rgba(16, 16, 16, 0.23);
			border: 2rpx solid rgba(187, 187, 187, 1);

			.box1 {
				width: 630rpx;
				height: 28rpx;
				border-radius: 28rpx;
				margin: 4rpx auto;
				background-color: rgba(16, 16, 16, 0.4);
				border: 2rpx solid rgba(187, 187, 187, 1);
			}
		}

		.content {
			position: relative;
			top: -20rpx;
			width: 590rpx;
			height: 840rpx;
			margin: 0 auto;
			line-height: 40rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(187, 187, 187, 1);

			.content1 {
				height: 74rpx;
				margin: 0 26rpx;
				border-bottom: 2rpx solid rgba(187, 187, 187, 1);
			}

			.content-item {
				display: flex;
				margin: 0 26rpx;
				height: 100rpx;
				justify-content: space-between;
				color: rgba(16, 16, 16, 1);
				font-size: 30rpx;
				line-height: 100rpx;
				font-family: SourceHanSerif-regular;
			}

			.content-num1 {
				display: flex;
				justify-content: flex-end;
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				margin: 100rpx 20rpx 0 0;

				.content-num1-money {
					margin-left: 40rpx;
					color: rgba(255, 0, 0, 1);

				}
			}
		}
	}
</style>
